/* Haruyuki custom */

/* color/background */
// $lightGray: #f4f4f5;
$lightGray: #f2f5fa;
$primaryBlue: #409eff;
$subjectBlue: #4663FD;
$subjectBlueLight: #6087fc;
$hazeBlue: #e0eafc;
$silverGray: #8e9eab;
$SmartDark: #304352;

/* color/background */
.haruyuki-color-hazeblue {
  color: $hazeBlue;
}

.haruyuki-color-subjectblue {
  color: $subjectBlue;
}

.haruyuki-color-subjectbluelight {
  color: $subjectBlueLight;
}

.haruyuki-color-primaryblue {
  color: $primaryBlue;
}

.haruyuki-color-silverGray {
  color: $silverGray;
}

.haruyuki-bg-color-white {
  background-color: #FFFFFF;
}

.haruyuki-bg-color-hazeblue {
  background-color: $hazeBlue;
}

/* width/height */
.haruyuki-width-100 {
  width: 100%;
}

.haruyuki-width-50 {
  width: 50%;
}

.haruyuki-width-30 {
  width: 30%;
}

.haruyuki-scrollbar-60vh {
  max-height: 60vh;
  overflow-y: auto;
}

.haruyuki-scrollbar-70vh {
  max-height: 70vh;
  overflow-y: auto;
}

/* flex */
.haruyuki-flex {
  display: flex;
}

.haruyuki-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.haruyuki-flex-space-between {
  display: flex;
  justify-content: space-between;
}

.haruyuki-flex-space-around {
  display: flex;
  justify-content: space-around;
}

.haruyuki-align-items-center {
  align-items: center;
}

.haruyuki-flex-x-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.haruyuki-flex-direction {
  flex-direction: column;
}

.haruyuki-flex-wrap {
  flex-wrap: wrap;
}

/* font-size */
.haruyuki-size-18 {
  font-size: 18px;
}

.haruyuki-size-16 {
  font-size: 16px;
}

.haruyuki-text-center {
  text-align: center;
}

/* margin/padding */
.haruyuki-mt-20 {
  margin-top: 20px;
}

.haruyuki-mt-40 {
  margin-top: 40px;
}

.haruyuki-mb-20 {
  margin-bottom: 20px;
}

.haruyuki-mb-40 {
  margin-bottom: 40px;
}

.haruyuki-mtb-10 {
  margin: 10px 0;
}

.haruyuki-mr-20 {
  margin-right: 20px;
}

.haruyuki-ml-100 {
  margin-left: 100px;
}

.haruyuki-ml-20 {
  margin-left: 20px;
}

.haruyuki-ml-6 {
  margin-left: 6px;
}

.haruyuki-p-10 {
  padding: 10px;
}

.haruyuki-plr-20 {
  padding: 0 20px;
}
.haruyuki-plr-40 {
  padding: 0 40px;
}
.haruyuki-plr-60 {
  padding: 0 60px;
}
.haruyuki-plr-80 {
  padding: 0 80px;
}

.haruyuki-ptb-10 {
  padding: 10px 0;
}

/* start--文本行数限制--start */
.haruyuki-line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.haruyuki-line-2 {
  -webkit-line-clamp: 2;
}

.haruyuki-line-3 {
  -webkit-line-clamp: 3;
}

.haruyuki-line-4 {
  -webkit-line-clamp: 4;
}

.haruyuki-line-5 {
  -webkit-line-clamp: 5;
}

.haruyuki-line-2, .haruyuki-line-3, .haruyuki-line-4, .haruyuki-line-5 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis; 
  display: -webkit-box; // 弹性伸缩盒
  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}
/* end--文本行数限制--end */

/* box-height */
.haruyuki-box-height-50 {
  height: 50px;
  line-height: 50px;
}

.haruyuki-border {
  border: 1px solid $hazeBlue;
}

/* Haruyuki Page Header */
.haruyuki-page-header-left {
  display: -webkit-box;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
}

.haruyuki-page-header-left::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 16px;
  right: -20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #DCDFE6;
}

/* Haruyuki row height line */
.haruyuki-line-height-special {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid $hazeBlue;
  transition: all 1s ease 0s;
  user-select: none;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  &:hover {
    background-color: $hazeBlue;
  }
}

/* Haruyuki Details */
.haruyuki-title {
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  // color: #a1c4fd;
}

.haruyuki-content {
  background: $lightGray;
  border-radius: 10px;
  padding: 20px 30px 12px 30px;
  margin-bottom: 20px;
}

/* Haruyuki FormTitle */
.haruyuki-form-title {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
}

/* Haruyuki image-preview */
.haruyuki-image-preview {
  border-radius: 10px;
  // padding: 14px;
  height: auto;
  // background: #F2F2F2;
  background: transparent;

  .haruyuki-image {
    border-radius: 10px;
    width: 100%;
    height: 140px;
    background: #FFFFFF;
    position: relative;
    .el-image {
      border-radius: 10px 10px 0 0;
    }

    .haruyuki-text {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 30px;
      line-height: 30px;
      text-align: center;
      width: 100%;
      // background-color: #979797;
      color: #ffffff;
      border-radius: 0 0 10px 10px;
      background-color: rgba(185, 185, 185, 0.8);
    }
  }
}

/* Haruyuki rests */
.cursor-pointer {
  cursor: pointer;
}

.cursor-pointer:hover {
  color: rgba(64, 158, 255, 0.8);
}



@media screen and (max-width: 1920px) {
  body {
      font-size: 12px;
  }
  
}